import type { FC } from "react";
import RobotIcon from "../assets/robot.svg";
interface EmptyStateProps {
  onNewChat: () => void;
  setInputText?: (text: string) => void;
}

// 定义一些快速提示示例
const QUICK_PROMPTS = [
  "帮我解释React中的useEffect钩子",
  "如何使用Tailwind CSS实现响应式设计？",
  "写一个TypeScript中的泛型示例",
  "React是什么?",
  "Vue是什么?",
];

const EmptyState: FC<EmptyStateProps> = ({ onNewChat, setInputText }) => {
  return (
    <div className="flex-1 flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-900">
      <div className="max-w-lg text-center">
        <div className="flex justify-center mb-6">
          <div className="text-blue-600 p-3 bg-blue-100 dark:bg-blue-900/30 rounded-full">
            <img src={RobotIcon} alt="Robot" className="w-20 h-" />
          </div>
        </div>

        <div className="text-2xl flex items-center justify-center font-bold text-gray-800 dark:text-white mb-3">
          欢迎使用 <p className="text-[#1296db]">Cirno AI </p> 助手
        </div>

        <p className="text-[#1296db] dark:text-gray-400 mb-8 mt-5">
          Cirno AI 可以帮助你回答问题、提供创意、辅助编程，甚至进行深度讨论。
          选择一个快速提示或开始一个新对话吧！
        </p>

        <div className="mb-8">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {QUICK_PROMPTS.map((prompt, index) => (
              <button
                key={index}
                onClick={() => {
                  onNewChat();
                  // 这里需要一个延迟，因为onNewChat会重置状态
                  setTimeout(() => {
                    if (setInputText) {
                      // 使用提供的setInputText函数
                      setInputText(prompt);
                    } else {
                      // 回退到直接DOM操作
                      const inputElem = document.querySelector(
                        "textarea"
                      ) as HTMLTextAreaElement;
                      if (inputElem) {
                        inputElem.value = prompt;
                        // 触发一个input事件，以便React可以捕获值的变化
                        const event = new Event("input", { bubbles: true });
                        inputElem.dispatchEvent(event);
                        // 聚焦输入框
                        inputElem.focus();
                      }
                    }
                  }, 100);
                }}
                className="p-3 text-left text-sm bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-700 transition-colors duration-150"
              >
                {prompt}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default EmptyState;
